<template>
	<view class="content">
		<view class="nav-bar">
			<view v-for="(item, index) in navList" :key="index" class="nav-item" :class="{current: tabCurrentIndex === index}"
			 @click="tabClick(index)">
				{{item.text}}
			</view>
		</view>
		<empty v-if="loadingType!='loading'&&coupons.length === 0"></empty>
		<view v-if="coupons.length > 0">
			<view class="coupon-list">
				<user-coupon-item :coupon="item" action-text="立即使用" @eventClick="navTo('/pages/category/category')" v-for="item in coupons"></user-coupon-item>
			</view>
			<uni-load-more :status="loadingType"></uni-load-more>
		</view>
	</view>
</template>

<script>
	import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue';
	import empty from "@/components/empty";
	import userCouponItem from "@/components/user-coupon-item";
	import {
		mapState,
		mapMutations
	} from 'vuex';
	export default {
		components: {
			uniLoadMore,
			empty,
			userCouponItem
		},
		data() {
			return {
				navList: [{
						state: '1',
						text: '可使用'
					},
					{
						state: '2',
						text: '已过期'
					},
					{
						state: '3',
						text: '已使用'
					}],
				tabCurrentIndex:0,
				isExpired: false,
				isUsed: false,
				pageNo: 1,
				pageSize: 10,
				coupons: [],
				total: 0,
				loadingType: ''
			};
		},

		onLoad(options) {
			this.tabClick(0);
		},
		onReachBottom() {
			if (this.loadingType === 'more') {
				this.pageNo = this.pageNo + 1;
				this.searchCoupon(this.isExpired,this.isUsed);
			}
		},
		computed: {
			...mapState(['hasLogin', 'userInfo', 'footPrint'])
		},
		methods: {
			tabClick(index) {
				this.tabCurrentIndex = index;
				this.resetPage();
				if(index==0){
					this.isExpired = false;
					this.isUsed = false;
				}
				else if(index==1){
					this.isExpired = true;
					this.isUsed = false;
				}
				else if(index==2){
					this.isExpired = false;
					this.isUsed = true;
				}
				this.searchCoupon(this.isExpired,this.isUsed);
			},
			//搜索优惠券
			searchCoupon(isExpired, isUsed) {
				var keyArray = ['USER','IS_EXPIRED','IS_USED'];
				//查找已使用无需加入是否过期查询条件
				if(isUsed)	
					keyArray = ['USER','IS_USED'];
				let postData = {
					keyArray: keyArray,
					userUuid: this.userInfo.userUuid,
					expired: isExpired,
					used: isUsed,
					startIndex: (this.pageNo - 1) * this.pageSize,
					pageSize: this.pageSize
				};
				//加载中
				this.loadingType = 'loading';
				this.$api.request.userCoupon(postData, res => {
					if (res.body.status.statusCode === '0') {
						var coupons = res.body.data.userCoupons;
						this.coupons = this.coupons.concat(coupons);
						this.total = res.body.data.total;
						this.loadingType = this.coupons.length >= this.total ? 'noMore' : 'more';
					} else {
						this.loadingType = 'more';
					}
				}, false);
			},
			resetPage() {
				this.coupons = [];
				this.total = 0;
				this.pageNo = 1;
			},
			navTo(url){
				uni.switchTab({
					url:'/pages/category/category'
				})
			}
		},
	}
</script>

<style lang="scss">
	page{
		background: $bg-color-light;
	}
	.content{
		margin: $page-row-spacing;
	}
</style>
